<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>聊天</title>
  <script th:src="@{/im/lib/jquery-3.3.1.js}"></script>
  <link rel="stylesheet" th:href="@{/im/css/reset.css}" />
  <link rel="stylesheet" th:href="@{/im/css/font/iconfont.css}" />
  <link rel="stylesheet" th:href="@{/im/css/index.css}" />
  <link rel="stylesheet" th:href="@{/viewer/viewer.min.css}" />
</head>
<body>
<div class="container">
  <div class="left-side">
    <ol>
      <li class="active">
        <button class="iconfont icon-xiaoxi"></button>
        <!--<span></span>-->
      </li>
      <li>
        <button class="iconfont icon-qun_huaban"></button>
      </li>
    </ol>
  </div>
  <div class="mid-list">
    <div class="top-bar">
      <span id="left-title">会话</span>
      <button id="bellBtn" class="iconfont icon-jingyin"></button>
      <audio id="msg-tips-voice" src="https://ks3-cn-beijing.ksyun.com/aojicrp/voice/tips.mp3"></audio>
    </div>
    <ul class="talk-list active">
    </ul>
    <p class="no-talk">暂无最近聊天</p>
    <p class="get-talk"><span class="iconfont icon-refresh"></span>正在获取最近聊天</p>
    <div class="student-list">
      <div class="search-wrap">
        <span class="iconfont icon-sousuo"></span>
        <input id="student-search" type="text" placeholder="搜索学生姓名、学号" />
      </div>
      <div id="no-student" class="no-student">
        <span class="iconfont icon-sousuo"></span>
        <p>未找到“张ABC”</p>
      </div>
      <div id="student-list-con" class="student-list-con">
        <dl id="student-list-dl">
        </dl>
      </div>
    </div>
  </div>
  <div class="right-content">
    <div class="top-bar talk-content-title-wrap">
      <div class="group-member">
        <p id="right-title">消息内容</p>
      </div>
    </div>
    <div class="member-list">
      <h5 id="member-count"></h5>
      <ul id="group-member-list">
      </ul>
    </div>
    <div class="talk-content-list-wrap">
      <div class="show-talk-con">
        <ul class="message-list">
        </ul>
      </div>
      <div class="enter-talk-con">
        <div class="tool-bar">
          <div class="img-input">
            <span class="iconfont icon-tupian"></span>
          </div>
        </div>
        <div class="input-block">
          <textarea name="" id="text" cols="30" rows="10" placeholder="请输入消息"></textarea>
        </div>
        <button id="sendBtn">发送</button>
      </div>
    </div>
    <div class="send-message-wrap">
      <div class="send-message">
        <img src="/im/imgs/default.png" alt="" />
        <h6>艾丽丝</h6>
        <button id="send-msg-btn">发消息</button>
      </div>
      <p id="no-select-student-tips" class="tips">当前未选择学生，左侧可以查找学生哦</p>
    </div>
  </div>
</div>
<div class="upload-img-wrap">
  <div class="upload-img">
    <div class="top">
      <span>发送图片</span>
      <i class="close">X</i>
    </div>
    <ul>
      <li><span>选择</span><input type="file" id="upd_pic" accept="image/jpeg, image/png, image/jpg"/></li>
      <li><span>预览</span><img src="" alt=""/></li>
    </ul>
    <button id="upd_file_btn" onclick="upd_file_btn()">发送</button>
  </div>
</div>
<script th:src="@{/im/js/base.js}"></script>
<script th:src="@{/im/js/index.js}"></script>
<script th:src="@{/im/sdk/webim.js}" type="text/javascript"></script>
<script src="https://tls.qcloud.com/libs/api.min.js" type="text/javascript"></script>
<!--用于获取文件MD5 js api(发送图片时用到)-->

<script th:src="@{/im/js/lib/md5/spark-md5.js}" type="text/javascript"></script>
<!--web im sdk-->

<script th:src="@{/im/sdk/json2.js}" type="text/javascript"></script>
<!--web im sdk 登录 示例代码-->

<script th:src="@{/im/js/login/login.js}" type="text/javascript"></script>
<!--web im sdk 登出 示例代码-->

<script th:src="@{/im/js/logout/logout.js}" type="text/javascript"></script>
<!--web im 解析一条消息 示例代码-->

<script th:src="@{/im/js/common/show_one_msg.js}" type="text/javascript"></script>
<!--web im demo 基本逻辑-->

<script th:src="@{/im/js/base.js}" type="text/javascript"></script>
<!--web im sdk 资料管理 api 示例代码-->

<script th:src="@{/im/js/profile/profile_manager.js}" type="text/javascript"></script>
<!--web im sdk 好友管理 api 示例代码-->

<script th:src="@{/im/js/friend/friend_manager.js}" type="text/javascript"></script>
<!--web im sdk 好友申请管理 api 示例代码-->

<script th:src="@{/im/js/friend/friend_pendency_manager.js}" type="text/javascript"></script>
<!--web im sdk 好友黑名单管理 api 示例代码-->

<script th:src="@{/im/js/friend/friend_black_list_manager.js}" type="text/javascript"></script>
<!--web im sdk 最近联系人 api 示例代码-->

<script th:src="@{/im/js/recentcontact/recent_contact_list_manager.js}" type="text/javascript"></script>
<!--web im sdk 群组管理 api 示例代码-->

<script th:src="@{/im/js/group/group_manager.js}" type="text/javascript"></script>
<!--web im sdk 群成员�����理 api 示例代码-->

<script th:src="@{/im/js/group/group_member_manager.js}" type="text/javascript"></script>
<!--web im sdk 加群申请管理 api 示例代码-->

<script th:src="@{/im/js/group/group_pendency_manager.js}" type="text/javascript"></script>
<!--web im 切换聊天好友或群组 示例代码-->

<script th:src="@{/im/js/switch_chat_obj.js}" type="text/javascript"></script>
<!--web im sdk 获取c2c获取群组历史消息 示例代码-->

<script th:src="@{/im/js/msg/get_history_msg.js}" type="text/javascript"></script>
<!--web im sdk 发送普通消息(文本和表情) api 示例代码-->

<script th:src="@{/im/js/msg/send_common_msg.js}" type="text/javascript"></script>
<!--web im sdk 上传和发送图片消息 api 示例代码-->

<script th:src="@{/im/js/msg/upload_and_send_pic_msg.js}" type="text/javascript"></script>
<!--web im sdk 上传和发送文件消息 api 示例代码-->

<script th:src="@{/im/js/msg/upload_and_send_file_msg.js}" type="text/javascript"></script>
<!--web im sdk 切换播放语音消息 示例代码-->

<script th:src="@{/im/js/msg/switch_play_sound_msg.js}" type="text/javascript"></script>
<!--web im sdk 发送自定义消息 api 示例代码-->

<script th:src="@{/im/js/msg/send_custom_msg.js}" type="text/javascript"></script>
<!--web im sdk 发送群自定义通知 api 示例代码-->

<script th:src="@{/im/js/msg/send_custom_group_notify_msg.js}" type="text/javascript"></script>
<!--web im 监听新消息(c2c或群) 示例代码-->

<script th:src="@{/im/js/msg/receive_new_msg.js}" type="text/javascript"></script>
<!--web im 监听群系统通知消息 示例代码-->

<script th:src="@{/im/js/msg/receive_group_system_msg.js}" type="text/javascript"></script>
<!--web im 监听好友系统通知消息 示例代码-->

<script th:src="@{/im/js/msg/receive_friend_system_msg.js}" type="text/javascript"></script>
<!--web im 监听资料系统通知消息 示例代码-->

<script th:src="@{/im/js/msg/receive_profile_system_msg.js}" type="text/javascript"></script>

<script th:src="@{/viewer/viewer.min.js}" type="text/javascript"></script>

<script th:src="@{/layer/layer.js}" type="text/javascript"></script>

<script type="text/javascript" th:inline="javascript">
    // 学生群组信息
    var studentListAll = new Array();
    studentListAll = [[${studentSearchData}]];

    //帐号模式，0-表示独立模式，1-表示托管模式
    var accountMode = 0;

    var userInfo = [[${loginInfo}]];

    //官方 demo appid,需要开发者自己修改（托管模式）
    var sdkAppID = userInfo.sdkAppid;
    var accountType = 29887;
    var userSig = userInfo.userSig;
    var identifier = userInfo.identifier;

    //当前用户身份
    var loginInfo = {
      'sdkAppID': sdkAppID, //用户所属应用id,必填
      'appIDAt3rd': sdkAppID,
      'identifier': identifier, //当前用户ID,必须是否字符串类型，必填
      'accountType': accountType, //用户所属应用帐号类型，必填
      'userSig': userSig,
      //当前用户身份凭证，必须是字符串类型，必填
      'identifierNick': null, //当前用户昵称，不用填写，登录接口会返回用户的昵称，如果没有设置，则返回用户的id
      'headurl': 'img/me.jpg' //当前用户默认头像，选填，如果设置过头像，则可以通过拉取个人资料接口来得到头像信息
    };

    var AdminAcount = 'qwe101';
    var selType = webim.SESSION_TYPE.C2C; //当前聊天类型
    var selToID = null; //当前选中聊天id（当聊天类型为私聊时，该值为好友帐号，否则为群号）
    var selSess = null; //当前聊天会话对象
    var recentSessMap = {}; //保存最近会话列表
    var reqRecentSessCount = 50; //每次请求的最近会话条数，业务可以自定义
    // var groupNextMsgSeq = 0; // 获取历史消息的序列号
    var groupNextMsgSeq = {};
    // var groupNextMsgTime = 0; // 获取历史消息的时间节点
    var groupNextMsgTime = {};
    var tempGroupMember = {}; // 群组成员信息

    var isPeerRead = 1; //是否需要支持APP端已读回执的功能,默认为0。是：1，否：0。

    //默认好友头像
    var friendHeadUrl = 'img/friend.jpg'; //仅demo使用，用于没有设置过头像的好友
    //默认群头像
    var groupHeadUrl = 'img/group.jpg'; //仅demo使用，用于没有设置过群头像的情况


    //存放c2c或者群信息（c2c用户：c2c用户id，昵称，头像；群：群id，群名称，群头像）
    var infoMap = {}; //初始化时，可以先拉取我的好友和我的群组信息


    var maxNameLen = 12; //我的好友或群组列表中名称显示最大长度，仅demo用得到
    var reqMsgCount = 15; //每次请求的历史消息(c2c获取群)条数，仅demo用得到

    var pageSize = 15; //表格的每页条数，bootstrap table 分页时用到
    var totalCount = 200; //每次接口请求的条数，bootstrap table 分页时用到

    var emotionFlag = false; //是否打开过表情选择框

    var curPlayAudio = null; //当前正在播放的audio对象

    var getPrePageC2CHistroyMsgInfoMap = {}; //保留下一次拉取好友历史消息的信息
    var getPrePageGroupHistroyMsgInfoMap = {}; //保留下一次拉取群历史消息的信息

    var defaultSelGroupId = null; //登录默认选中的群id，选填，仅demo用得到

    //监听（多终端同步）群系统消息方法，方法都定义在receive_group_system_msg.js文件中
    //注意每个数字代表的含义，比如，
    //1表示监听申请加群消息，2表示监听申请加群被同意消息，3表示监听申请加群被拒绝消息
    var onGroupSystemNotifys = {
      "1": onApplyJoinGroupRequestNotify, //申请加群请求（只有管理员会收到）
      "2": onApplyJoinGroupAcceptNotify, //申请加群被同意（只有申请人能够收到）
      "3": onApplyJoinGroupRefuseNotify, //申请加群被拒绝（只有申请人能够收到）
      "4": onKickedGroupNotify, //被管理员踢出群(只有被踢者接收到)
      "5": onDestoryGroupNotify, //群被解散(全员接收)
      "6": onCreateGroupNotify, //创建群(创建者接收)
      "7": onInvitedJoinGroupNotify, //邀请加群(被邀请者接收)
      "8": onQuitGroupNotify, //主动退群(主动退出者接收)
      "9": onSetedGroupAdminNotify, //设置管理员(被设置者接收)
      "10": onCanceledGroupAdminNotify, //取消管理员(被取消者接收)
      "11": onRevokeGroupNotify, //群已被回收(全员接收)
      "15": onReadedSyncGroupNotify, //群消息已读同步通知
      "255": onCustomGroupNotify, //用户自定义通知(默认全员接收)
      "12": onInvitedJoinGroupNotifyRequest //邀请加群(被邀请者接收,接收者需要同意)
    };

    //监听好友系统通知函数对象，方法都定义在receive_friend_system_msg.js文件中
    var onFriendSystemNotifys = {
      "1": onFriendAddNotify, //好友表增加
      "2": onFriendDeleteNotify, //好友表删除
      "3": onPendencyAddNotify, //未决增加
      "4": onPendencyDeleteNotify, //未决删除
      "5": onBlackListAddNotify, //黑名单增加
      "6": onBlackListDeleteNotify //黑名单删除
    };

    var onC2cEventNotifys = {
      "92": onMsgReadedNotify, //消息已读通知,
      "96": onMultipleDeviceKickedOut
    };

    //监听资料系统通知函数对象，方法都定义在receive_profile_system_msg.js文件中
    var onProfileSystemNotifys = {
      "1": onProfileModifyNotify //资料修改
    };

    //监听连接状态回调变化事件
    var onConnNotify = function (resp) {
      var info;
      switch (resp.ErrorCode) {
        case webim.CONNECTION_STATUS.ON:
          webim.Log.warn('建立连接成功: ' + resp.ErrorInfo);
          break;
        case webim.CONNECTION_STATUS.OFF:
          info = '连接已断开，无法收到新消息，请检查下你的网络是否正常: ' + resp.ErrorInfo;
          // alert(info);
          webim.Log.warn(info);
          break;
        case webim.CONNECTION_STATUS.RECONNECT:
          info = '连接状态恢复正常: ' + resp.ErrorInfo;
          // alert(info);
          webim.Log.warn(info);
          break;
        default:
          webim.Log.error('未知连接状态: =' + resp.ErrorInfo);
          break;
      }
    };

    //IE9(含)以下浏览器用到的jsonp回调函数
    function jsonpCallback(rspData) {
      webim.setJsonpLastRspData(rspData);
    }

    //监听事件
    var listeners = {
      "onConnNotify": onConnNotify //监听连接状态回调变化事件,必填
        ,
      "jsonpCallback": jsonpCallback //IE9(含)以下浏览器用到的jsonp回调函数，
        ,
      "onMsgNotify": onMsgNotify //监听新消息(私聊，普通群(非直播聊天室)消息，全员推送消息)事件，必填
        ,
      "onBigGroupMsgNotify": onBigGroupMsgNotify //监听新消息(直播聊天室)事件，直播场景下必填
        ,
      <!--"onGroupSystemNotifys": onGroupSystemNotifys //监听（多终端同步）群系统消息事件，如果不需要监听，可不填-->
        <!--,-->
      <!--"onGroupInfoChangeNotify": onGroupInfoChangeNotify //监听群资料变化事件，选填-->
        <!--,-->
      "onFriendSystemNotifys": onFriendSystemNotifys //监听好友系统通知事件，选填
        ,
      "onProfileSystemNotifys": onProfileSystemNotifys //监听资料系统（自己或好友）通知事件，选填
        ,
      "onKickedEventCall": onKickedEventCall //被其他登录实例踢下线
        ,
      "onC2cEventNotifys": onC2cEventNotifys //监听C2C系统消息通道
        ,
      "onAppliedDownloadUrl": onAppliedDownloadUrl //申请文件/音频下载地址的回调
        ,
      "onLongPullingNotify": function (data) {
        <!--console.debug('onLongPullingNotify', data)-->
      }
    };

    var isAccessFormalEnv = true; //是否访问正式环境



    var isLogOn = false; //是否开启sdk在控制台打印日志

    //初始化时，其他对象，选填
    var options = {
      'isAccessFormalEnv': isAccessFormalEnv, //是否访问正式环境，默认访问正式，选填
      'isLogOn': isLogOn //是否开启控制台打印日志,默认开启，选填
    }



    var msgflow = document.getElementsByClassName("msgflow")[0];
    var bindScrollHistoryEvent = {
      init: function () {
        <!--msgflow.onscroll = function () {-->
          <!--if (msgflow.scrollTop == 0) {-->
            <!--msgflow.scrollTop = 10;-->
            <!--if (selType == webim.SESSION_TYPE.C2C) {-->
              <!--getPrePageC2CHistoryMsgs();-->
            <!--} else {-->
              <!--getPrePageGroupHistoryMsgs();-->
            <!--}-->

          <!--}-->
        <!--}-->
      },
      reset: function () {
        <!--msgflow.onscroll = null;-->
      }
    };

  // 注意这里的先后顺序，webimLog中要用到initStudentGroupInfo中的结果，所以先初始化学生群组数据
  <!--initStudentGroupInfo();-->

  webimLogin();
</script>
</body>
</html>